<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <link rel="stylesheet" href="../dist/styles/main.css">
  <link rel="stylesheet" href="unslider/css/unslider.css">

</head>

<body>

<div id="main-header">
  <div class="main-header-nav">
    <div class="main-header-image"
         style="background-image: url('http://i0.hdslb.com/group1/M00/B7/30/oYYBAFcjKTGANfoVAAGAcG7aL64682.jpg');"></div>
    <div class="header-container needstick">
      <ul class="main-header-nav-body">
        <li class="nav-li floatleft now">
          <a href="#">首页</a>
        </li>

        <li class="nav-li floatleft">
          <a href="#">分类</a>
          <div class="nav-li-list">
            <a href="#">音乐</a>
            <a href="#">动画</a>
          </div>
        </li>

        <li class="nav-li floatleft">
          <a href="#">新番</a>
        </li>

        <li class="nav-li floatleft">
          <a href="#">移动端</a>
        </li>

        <li class="nav-li floatleft">
          <a href="#">项目</a>
        </li>

        <li class="nav-li floatleft">
          <a href="#">关于</a>
        </li>

        <div class="header-search floatright">
          <form action="#" method="post">
            <input name="content" placeholder="这里搜索">
            <input type="submit" value="搜 索" title="搜索" class="btn-search">
          </form>
        </div>
      </ul>
    </div>
  </div>
</div>

<div id="main-container">

  <div id="index-head-area" class="area">
    <div class="area-inner">
      <div class="left-block floatleft">
        <div class="unslider-banner floatleft">
          <div class="block-banner">
            <ul>
              <li><a href="/v/ac2718399" target="_blank">
                <img src="http://cdn.aixifan.com/dotnet/artemis/u/cms/www/201605/051101120guvds4e.jpg"></a></li>
              <li><a href="/v/ac2715419" target="_blank">
                <img src="http://cdn.aixifan.com/dotnet/artemis/u/cms/www/201605/05103633ial4xt7r.jpg"></a>
              </li>
              <li><a href="/v/ac2714049" target="_blank">
                <img src="http://cdn.aixifan.com/dotnet/artemis/u/cms/www/201605/04103351y5cqqlfm.jpg"></a>
              </li>
              <li><a href="/v/ac2716649" target="_blank">
                <img src="http://cdn.aixifan.com/dotnet/artemis/u/cms/www/201605/04141716our4pmt0.jpg"></a>
              </li>
              <li><a href="/v/ab1470408_0" target="_blank">
                <img src="http://cdn.aixifan.com/dotnet/artemis/u/cms/www/201605/04111256nyr7sx67.jpg"></a></li>
            </ul>
          </div>
        </div>
        <div class="clear"></div>
      </div>

      <div class="right-block floatleft">
        <div class="video-block-mask floatleft">
          <a href="#" target="_blank">
            <div class="video-block-mask-preview">
              <img src="http://i2.hdslb.com/bfs/archive/b7c6284b29d4bf718abd54dcdb811208abf47da5.jpg_320x200.jpg">
            </div>
            <div class="video-block-mask-mask"></div>

            <div class="video-block-mask-info">
              <div class="title">【栗山未来/AMV】所以 请你再等等我</div>
              <div class="up">up主：无力的某T</div>
              <div class="play">播放：13054</div>
            </div>
          </a>
        </div>

        <div class="video-block-mask floatleft">
          <a href="#" target="_blank">
            <div class="video-block-mask-preview">
              <img src="http://i2.hdslb.com/bfs/archive/b7c6284b29d4bf718abd54dcdb811208abf47da5.jpg_320x200.jpg">
            </div>
            <div class="video-block-mask-mask"></div>

            <div class="video-block-mask-info">
              <div class="title">【栗山未来/AMV】所以 请你再等等我</div>
              <div class="up">up主：无力的某T</div>
              <div class="play">播放：13054</div>
            </div>
          </a>
        </div>

        <div class="clear"></div>
      </div>

      <div class="clear"></div>
    </div>
  </div>

  <div class="area">
    <div class="area-inner">
      <div class="area-banner">
        <a class="area-banner-ch">
          <h3>番剧</h3>
          <i class="area-banner-line-left"></i>
        </a>
        <i class="area-banner-line-right"></i>
        <i class="area-banner-line-circle"></i>
      </div>


      <div class="list-video-block floatleft">
        <div class="video-block floatleft">
          <a href="#" class="video-block-main">
            <img src="http://cdn.aixifan.com/dotnet/artemis/u/cms/www/201604/0413024317241glv.jpg"/>
          </a>
          <div class="video-block-time">20:04</div>
          <a href="#" class="video-block-info">
            标题: 【东方手绘剧场】东方现世幻想侭 -预告-【莳乃汉化组】
            UP主: 莳乃字幕屋
          </a>
          <div class="video-block-info-hidden">
            <div class="left floatleft">
              播放: 2333
            </div>
            <div class="right floatright">
              弹幕: 233
            </div>
          </div>
        </div>

        <div class="video-block floatleft">
          <a href="#" class="video-block-main">
            <img src="http://cdn.aixifan.com/dotnet/artemis/u/cms/www/201604/0413024317241glv.jpg"/>
          </a>
          <div class="video-block-time">20:04</div>
          <a href="#" class="video-block-info">
            标题: 【东方手绘剧场】东方现世幻想侭 -预告-【莳乃汉化组】
            UP主: 莳乃字幕屋
          </a>
          <div class="video-block-info-hidden">
            <div class="left floatleft">
              播放: 2333
            </div>
            <div class="right floatright">
              弹幕: 233
            </div>
          </div>
        </div>

        <div class="video-block floatleft">
          <a href="#" class="video-block-main">
            <img src="http://cdn.aixifan.com/dotnet/artemis/u/cms/www/201604/0413024317241glv.jpg"/>
          </a>
          <div class="video-block-time">20:04</div>
          <a href="#" class="video-block-info">
            标题: 【东方手绘剧场】东方现世幻想侭 -预告-【莳乃汉化组】
            UP主: 莳乃字幕屋
          </a>
          <div class="video-block-info-hidden">
            <div class="left floatleft">
              播放: 2333
            </div>
            <div class="right floatright">
              弹幕: 233
            </div>
          </div>
        </div>

        <div class="video-block floatleft">
          <a href="#" class="video-block-main">
            <img src="http://cdn.aixifan.com/dotnet/artemis/u/cms/www/201604/0413024317241glv.jpg"/>
          </a>
          <div class="video-block-time">20:04</div>
          <a href="#" class="video-block-info">
            标题: 【东方手绘剧场】东方现世幻想侭 -预告-【莳乃汉化组】
            UP主: 莳乃字幕屋
          </a>
          <div class="video-block-info-hidden">
            <div class="left floatleft">
              播放: 2333
            </div>
            <div class="right floatright">
              弹幕: 233
            </div>
          </div>
        </div>

        <div class="video-block floatleft">
          <a href="#" class="video-block-main">
            <img src="http://cdn.aixifan.com/dotnet/artemis/u/cms/www/201604/0413024317241glv.jpg"/>
          </a>
          <div class="video-block-time">20:04</div>
          <a href="#" class="video-block-info">
            标题: 【东方手绘剧场】东方现世幻想侭 -预告-【莳乃汉化组】
            UP主: 莳乃字幕屋
          </a>
          <div class="video-block-info-hidden">
            <div class="left floatleft">
              播放: 2333
            </div>
            <div class="right floatright">
              弹幕: 233
            </div>
          </div>
        </div>

      </div>

      <div class="clear"></div>

    </div>
  </div>

  <div class="area">
    <div class="area-inner">
      <div class="area-banner">
        <a class="area-banner-ch">
          <h3>动画</h3>
          <i class="area-banner-line-left"></i>
        </a>
        <i class="area-banner-line-right"></i>
        <i class="area-banner-line-circle"></i>
      </div>
    </div>
  </div>

  <div class="area">
    <div class="area-inner">
      <div class="area-banner">
        <a class="area-banner-ch">
          <h3>音乐</h3>
          <i class="area-banner-line-left"></i>
        </a>
        <i class="area-banner-line-right"></i>
        <i class="area-banner-line-circle"></i>
      </div>
    </div>
  </div>


</div>

<div id="footer">
  <div class="area-inner">
    <div class="about-block floatleft">
      <div class="about-item left floatleft">
        <div class="about-title">About</div>
        <div class="about-links">
          <a href="#">BiliBili弹幕视频网</a>
          <a href="#">更新日志</a>
          <a href="#">项目地址</a>
        </div>
      </div>
      <div class="about-item floatleft">
        <div class="about-title">WhiteBlue</div>
        <div class="about-links">
          <a href="#">Blog</a>
          <a href="#">Email</a>
        </div>
      </div>
      <div class="about-item right floatleft">
        <div class="about-title">空位</div>
        <div class="about-links">
          <a href="#">没想好放什么orz</a>
        </div>
      </div>
    </div>
    <div class="clear"></div>
  </div>
</div>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="stickup.js"></script>
<script type="text/javascript" src="unslider/js/unslider-min.js"></script>
<script type="text/javascript">
  $(document).ready(function () {
    $('.video-block').hover(function () {
        $(this).children('.video-block-time').toggleClass('video-block-time-active');
        $(this).children('.video-block-info').toggleClass('video-block-info-active');
      }
    );

    $('.can-active .nav-li-list').hover(function () {
      $(this).toggleClass('active');
    });

    $('.block-banner').unslider({
      animation: 'horizontal',
      autoplay: true,
      arrows: false
    });

    $('.needstick').stickUp({});
  });
</script>

</body>
</html>
